<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ include file="./nav.jsp" %>
<%@ include file="./editorNav.jsp" %>
<style>
    .note-content{
        margin-top: 3vh;
        min-height: 300px;
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <img src="/img/stars.jpg" alt="..." class="note-img">
        </div>
        <div class="col-md-10 col-md-offset-1 note-type">
            ${note.data.tittle}
                <input type="hidden" id="tittle" value="${note.data.tittle}">
                <input type="hidden" id="text" value="${note.data.text}">
                <div style="float:right;">
                    <c:if test="${note.data.author.userid==user.userid}">
                        <button class="note-edit" onclick="toUpdateNote()" style="margin-top: -10px;">
                            edit
                        </button>
                    </c:if>
                    <c:if test="${note.data.author.userid!=user.userid}">
                        <button class="note-edit" onclick="toCreate()">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                        </button>
                    </c:if>

                </div>
        </div>

    </div>

    <div class="row">
        <div class="col-md-10 col-md-offset-1 note-content">
            <div class="row">
                <div class="col-md-2" style=" border-right:2px solid #ebebeb;text-align: center;">
                <img class="headimg" src="${note.data.author.headimage}">
                ${note.data.author.nickname}
                </div>
                <div class="col-md-10" style="height: 100%;">
                    ${note.data.text}
                    <input type="hidden" id="noteid" value="${note.data.noteId}">

                </div>
            </div>

            <div style="padding:0px;margin:0px;position: absolute;right: 20px;bottom: 10px;">
                <a href="#" style="text-decoration: none;font-size: 20px;" data-toggle="modal" data-target="#myModal">评论</a>
            </div>


        </div>


            <div class="col-md-10 col-md-offset-1">
                <div class="top-line">评论</div>
            </div>
                <c:if test="${note.data.comments!=null}">
                    <c:forEach items="${note.data.comments}" var="comment">
                        <div class="col-md-10 col-md-offset-1 note-content">

                            <div class="col-md-2" style=" border-right:2px solid #ebebeb;text-align: center;">
                                <img class="headimg" src="${comment.author.headimage}">
                                    ${comment.author.nickname}
                            </div>
                            <div class="col-md-10">
                                    ${comment.html}
                            </div>

                            <c:if test="${comment.author.userid==user.userid}">
                                <input type="hidden" id="commentid" value="${comment.commentid}">
                                <input type="hidden" id="comment" value="${comment.html}">
                                <div style="padding:0px;margin:0px;position: absolute;right: 20px;bottom: 10px;">
                                    <a href="#" style="text-decoration: none;font-size: 20px;" onclick="showCommentModal()">编辑</a>
                                </div>
                            </c:if>

                        </div>


                    </c:forEach>
                </c:if>



    </div>


</div>
<%--评论模态框--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">评论</h4>
            </div>
            <div class="modal-body">

                <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font">
                            <i class="icon-font"></i><b class="caret"></b></a>
                        <ul class="dropdown-menu"> </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height">

                        </i> <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                            <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                            <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a> <!--加粗-->        <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
                        <!-- 斜体-->
                        <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
                        <!-- 删除线-->
                        <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
                        <!-- 下划线-->
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
                        <!-- 加点-->
                        <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
                        <!-- 数字排序-->
                        <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
                        <!-- 减少缩进-->
                        <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
                        <!--增加缩进-->
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
                        <!--左对齐-->
                        <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
                        <!--居中-->
                        <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
                        <!--右对齐-->
                        <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
                        <!--垂直对齐-->
                    </div>
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
                        <!-- 链接-->
                        <div class="dropdown-menu input-append">
                            <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
                            <button class="btn" type="button">Add</button>
                        </div>
                        <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
                    </div>
                    <div class="btn-group">
                        <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
                        <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
                    </div>    <div class="btn-group">
                    <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
                    <!--撤销-->
                    <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
                    <!--恢复-->
                </div>
                    <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech=""></div>
                <div id="editor">

                </div>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="addComment()">确定</button>
            </div>

        </div>
    </div>
</div>


</div>

<%--编辑评论模态框--%>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="height: 400px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="commentModalLabel">编辑评论</h4>
            </div>
            <div class="modal-body">

                <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font">
                            <i class="icon-font"></i><b class="caret"></b></a>
                        <ul class="dropdown-menu"> </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height">

                        </i> <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                            <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                            <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a> <!--加粗-->        <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
                        <!-- 斜体-->
                        <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
                        <!-- 删除线-->
                        <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
                        <!-- 下划线-->
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
                        <!-- 加点-->
                        <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
                        <!-- 数字排序-->
                        <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
                        <!-- 减少缩进-->
                        <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
                        <!--增加缩进-->
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
                        <!--左对齐-->
                        <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
                        <!--居中-->
                        <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
                        <!--右对齐-->
                        <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
                        <!--垂直对齐-->
                    </div>
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
                        <!-- 链接-->
                        <div class="dropdown-menu input-append">
                            <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
                            <button class="btn" type="button">Add</button>
                        </div>
                        <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
                    </div>
                    <div class="btn-group">
                        <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn1"><i class="icon-picture"></i></a>
                        <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
                    </div>    <div class="btn-group">
                    <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
                    <!--撤销-->
                    <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
                    <!--恢复-->
                </div>
                    <input type="text" data-edit="inserttext" id="voiceBtn1" x-webkit-speech=""></div>
                <div id="editComment">

                </div>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="updateComment()">确定</button>
            </div>

        </div>
    </div>
</div>

<%--编辑帖子--%>
<div class="modal fade" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="noteModalLabel">编辑帖子</h4>
            </div>
            <div class="modal-body" style="height: 380px">
                <div class="form-group">
                    <label for="tittle" class="col-sm-1 control-label manage-item">标题</label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control manage-item" id="tittle1" style="height: 40px;">
                    </div>
                </div>

                <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font">
                            <i class="icon-font"></i><b class="caret"></b></a>
                        <ul class="dropdown-menu"> </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height">

                        </i> <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                            <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                            <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a> <!--加粗-->        <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
                        <!-- 斜体-->
                        <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
                        <!-- 删除线-->
                        <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
                        <!-- 下划线-->
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
                        <!-- 加点-->
                        <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
                        <!-- 数字排序-->
                        <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
                        <!-- 减少缩进-->
                        <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
                        <!--增加缩进-->
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
                        <!--左对齐-->
                        <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
                        <!--居中-->
                        <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
                        <!--右对齐-->
                        <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
                        <!--垂直对齐-->
                    </div>
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
                        <!-- 链接-->
                        <div class="dropdown-menu input-append">
                            <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
                            <button class="btn" type="button">Add</button>
                        </div>
                        <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
                    </div>
                    <div class="btn-group">
                        <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn2"><i class="icon-picture"></i></a>
                        <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
                    </div>    <div class="btn-group">
                    <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
                    <!--撤销-->
                    <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
                    <!--恢复-->
                </div>
                    <input type="text" data-edit="inserttext" id="voiceBtn2" x-webkit-speech=""></div>
                <div id="editNote">

                </div>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="updateNote()">确定</button>
            </div>

        </div>
    </div>
</div>


</div>
<script type="text/javascript">

        $(function(){
            function initToolbarBootstrapBindings() {
                var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
                        'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
                        'Times New Roman', 'Verdana'],
                    fontTarget = $('[title=Font]').siblings('.dropdown-menu');
                $.each(fonts, function (idx, fontName) {
                    fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
                });
                $('a[title]').tooltip({container:'body'});
                $('.dropdown-menu input').click(function() {return false;})
                    .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
                    .keydown('esc', function () {this.value='';$(this).change();});
                $('[data-role=magic-overlay]').each(function () {
                    var overlay = $(this), target = $(overlay.data('target'));
                    overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
                });
                $('#voiceBtn').hide();
                if ("onwebkitspeechchange"  in document.createElement("input")) {
                    var editorOffset = $('#editor').offset();
                    $('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
                } else {
                    $('#voiceBtn').hide();
                }
            };
            function showErrorAlert (reason, detail) {
                var msg='';
                if (reason==='unsupported-file-type') {
                    msg = "Unsupported format " +detail;
                } else {
                    console.log("error uploading file", reason, detail);
                }
                $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button>'+
                    '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
            };
            initToolbarBootstrapBindings();
            $('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
            $('#editComment').wysiwyg({ fileUploadError: showErrorAlert} );
            $('#editNote').wysiwyg({ fileUploadError: showErrorAlert} );
        });




//评论
    function addComment() {
        var note =  $('#editor').html();
        var noteid = $("#noteid").val();
        $.post("${pageContext.request.contextPath}/api/user/commemt/create",
            {"noteid":noteid,"text":note},function (data) {
                if (data.success==1){
                    $("#myModal").modal("hide");

                } else{
                    alert("添加失败！");
                }
            });
    }
    //编辑评论
    function updateComment() {
        var commentid = $("#commentid").val();
        var text = $("#editComment").html();
        $.post("${pageContext.request.contextPath}/api/user/commemt/edit",
            {"commentid":commentid,"text":text},function (data) {
                if (data.success==1){
                    $("#commentModal").modal("hide");

                } else{
                    alert("修改失败！");
                }
        })


    }
    //显示评论模态框
    function showCommentModal() {
        var text = $("#comment").val();
        console.log(text+"tttttt");
        $("#editComment").html(text);
        $("#commentModal").modal("show");
    }
    //显示编辑帖子模态框
    function toUpdateNote() {
        var tittle = $("#tittle").val();
        var text = $("#text").val();
        $("#tittle1").val(tittle);
        $("#editNote").html(text);
        $("#noteModal").modal("show");

    }
    // 编辑帖子
    function updateNote() {
        var noteid = $("#noteid").val();
        var tittle = $("#tittle1").val();
        var text = $("#editNote").html();
        $.post("${pageContext.request.contextPath}/api/user/note/edit",{"noteid":noteid,"tittle":tittle,"text":text},function (data) {
            if (data.success==1){
                $("#noteModal").modal("hide");

            } else{
                alert("修改失败！");
            }
        })
    }

    function toCreate() {
            $.get("${pageContext.request.contextPath}/api/user/note/toCreate",function (data) {
                if (data.success==0){
                    window.location.href="${pageContext.request.contextPath}/login.jsp";
                }else {
                    window.location.href="${pageContext.request.contextPath}/api/user/note/toCreate";
                }

            })

        }
</script>
</body>
</html>
